<template>

	<view class="">
		<!-- 轮播图 -->
		<swiper style="height: 200px;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in lunboList">
				<view class="swiper-item">
					<image :src="item.url" mode="" style="width: 100%;"></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 和风天气 -->
		<view class="weather"
			style="height: 100rpx;border: 1px solid #ccc;margin: 5px; border-radius: 5px;display: flex;justify-content: space-between; padding: 10rpx;align-items: center;">
			<view class="icon" style="width: 100rpx;height: 100rpx; ">
				<image style="width: 100%;height: 100%;" :src="'/static/weather/icons/'+ weatherNow.icon +'.svg'"
					mode=""></image>
			</view>
			<view class="text" style="font-size: 50rpx;margin-left: 10px;">
				{{weatherNow.temp}}°C
			</view>
			<view class="text" style="font-size: 34rpx;margin-left: 10rpx;">
				{{weatherNow.text}}
			</view>
			<view class="text" style=" margin-left: 10rpx;">
				{{weatherNow.windDir}} {{weatherNow.windScale}}级
			</view>
			<view>
				<view class="text" style="margin-left: 10rpx;">
					体感温度： {{weatherNow.feelsLike }}°C
				</view>
				<view class="text" style="margin-left: 10rpx;">
					湿度： {{weatherNow.humidity }}%
				</view>
			</view>
		</view>
		<!-- 分类栏 -->
		<view class="">
			<uni-section title="分类图标栏" type="line" titleFontSize="18px" padding>
				<uni-grid :show-border="false" :column="5" @change="changeGrid">
					<uni-grid-item v-for="(item,index) in gridData" :index="index">
						<view class="grid-item-box" style="background-color: #fff;">
							<uni-icons :type="item.icon" :size="30" color="#fe0067" />
							<text class="grid-item-text">{{item.title}}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</uni-section>
		</view>
		<!-- 搜素栏 -->
		<uni-section title="公共交通栏搜索" type="line" titleFontSize="18px" padding />
		<view class="search-box">
			<uni-search-bar @confirm="searchCityBus" v-model="searchKey" />
		</view>
		<button class="btn" type="default" @tap="showme">我在哪里？</button>

		<!-- 推荐栏 -->
		<uni-section title="景点推荐" type="line" titleFontSize="18px" padding />
		<view class="item_tab">
			<view class="item" v-for="(item,index) in Chinaitmes" @tap="toDetails(item.objectId)">
				<view class="pic">
					<image :src="item.img" mode="" style="width: 300rpx; height: 350rpx;"></image>
				</view>
				<view class="msg" style="width: 500rpx;">
					<view class="title">{{item.name}}</view>
					<view class="intro">{{item.intro}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		CONFIG
	} from '../../utils/config.js'
	// 状态库
	import {
		userStore
	} from '../../store/userStore.js'
	let store = userStore()
	onLoad(() => {
		getLunbo() //轮播图
		getWeather() //和风天气
		searchCityBus() //高德地图
		getPos() //获取当前坐标
		getXianPost("1") //获取推荐景点
	})
	//轮播图
	let lunboList = ref([])
	async function getLunbo() {
		let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/lunbo")
		lunboList.value = res.results.map(item => {
			item.url = item.url.trim()
			return item
		})
		console.log(lunboList.value)
	}
	//和风天气
	let weatherNow = ref({})
	async function getWeather() {
		let res = await uni.$get(CONFIG.hefeng_now, {
			key: CONFIG.hefeng_key,
			location: CONFIG.hefeng_location
		})
		if (res.code == 200) {
			weatherNow.value = res.now
			console.log(res.now)
		}
	}
	//高德地图
	let searchKey = ref("")

	function searchCityBus() {
		if (searchKey.value == "") {
			uni.showToast({
				title: "请输入搜素名称",
				icon: "none"
			})
		} else {
			let url = `https://uri.amap.com/line?name=${searchKey.value}&city=010&callnative=0`
			window.location.href = url
		}
	}
	// 分类
	let gridData = [{
			title: '热映电影',
			icon: 'videocam'

		},
		{
			title: '地理位置',
			icon: 'location'
		},
		{
			title: 'Ai助手',
			icon: 'search'
		},
		{
			title: '天气预报',
			icon: 'notification'
		},
		{
			title: '景点',
			icon: 'camera-filled'
		}
	]
	// 获取当前地点坐标
	function getPos() {
		uni.getLocation({
			success(res) {
				console.log(res)
				store.setPos(res.latitude, res.longitude)
			}
		})
	}
	let Chinaitmes = ref([])
	// 获取类别为1的景点，推荐景点
	async function getXianPost(type) {
		let data = {
			"type": type
		}
		// “encodeURI” 是 JavaScript 中的一个函数，用于对 URL 进行编码，以确保 URL 中的特殊字符被正确处理。
		//“JSON.stringify (data)” 是将 “data” 对象转换为 JSON 格式的字符串。整体上，这段代码通常用于在进行网络请求或者处理包含特殊字符的数据时，
		//确保数据能够正确地在 URL 中传递或者被处理。
		let ed = encodeURI(JSON.stringify(data))
		let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/ChinaPlayItem?where=" + ed)
		Chinaitmes.value = res.results
		console.log(res)
	}
	// 根据所点击景区跳到playinChinaDetails页面
	function toDetails(id) {
		uni.navigateTo({
			url: "/pages/playinChinaDetails/playinChinaDetails?id=" + id
		})
	}
	//我在哪里：查看自己所在的位置
	function showme() {
		uni.navigateTo({
			url: "/pages/mywebView/mywebView?type=1"
		})
	}
</script>

<style>
	.grid-item-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
	}



	/* 标题 */
	.title {
		text-align: center;
		color: royalblue;
		border: 1px solid #ccc;
		border-radius: 5rpx;
		box-shadow: 3px 3px 3px #eee;
		margin: 10rpx;
		padding: 10rpx;
	}

	/* 介绍 */
	.intro {
		/* 首行缩进1格 */
		text-indent: 1em;
		padding: 0 15rpx 0 15rpx;
		font-size: 30rpx;
		color: #666;
		overflow: hidden;
		/* 设定行数 */
		-webkit-line-clamp: 5;
		/* 超出字符转换为........... */
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.search-box {
		border: 1px solid grey;
	}

	.item_tab {
		width: 100%;
		border: 1px solid #eee;
		box-shadow: 3px 3px 3px #eee;
		border-radius: 10px;
		margin-bottom: 5px;
	}

	.item_tab>.item {
		display: flex;
		border: 1px solid gray;
		border-radius: 5px;
		height: 390rpx;
		margin-top: 10px;
	}

	.item_tab>.item>.pic {
		width: 320rpx;
		height: 320rpx;
		border: 1px solid #ccc;
		margin: 15rpx;
	}

	.pic>image {
		width: 320rpx;
		height: 320rpx;
	}

	.btn {
		color: white;
		/* 按钮文本颜色 */
		background-color: gray;
		/* 按钮的背景颜色 */
	}
</style>git config --global user.name '小王子' 
git config --global user.email 
git remote set-url  '12935259+XingZhuoYu@user.noreply.gitee.com'